<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
        <title>The Demo For Upload With Token</title>
        <style>
            .sk-chase {
                position: absolute;
                top: 50%;
                left: 50%;
                width: 40px;
                height: 40px;
                transform: translate(-50%, -50%);
                -webkit-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                -o-transform: translate(-50%, -50%);
                animation: sk-chase 2.5s infinite linear both;
            }

            .sk-chase-dot {
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0; 
                animation: sk-chase-dot 2.0s infinite ease-in-out both; 
            }

            .sk-chase-dot:before {
                content: '';
                display: block;
                width: 25%;
                height: 25%;
                background-color: #fff;
                border-radius: 100%;
                animation: sk-chase-dot-before 2.0s infinite ease-in-out both; 
            }

            .sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }
            .sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }
            .sk-chase-dot:nth-child(3) { animation-delay: -0.9s; }
            .sk-chase-dot:nth-child(4) { animation-delay: -0.8s; }
            .sk-chase-dot:nth-child(5) { animation-delay: -0.7s; }
            .sk-chase-dot:nth-child(6) { animation-delay: -0.6s; }
            .sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; }
            .sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; }
            .sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; }
            .sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; }
            .sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; }
            .sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; }

            @keyframes sk-chase {
                100% { transform: rotate(360deg); } 
            }

            @keyframes sk-chase-dot {
                80%, 100% { transform: rotate(360deg); } 
            }

            @keyframes sk-chase-dot-before {
                50% {
                    transform: scale(0.4); 
                } 100%, 0% {
                    transform: scale(1.0); 
                } 
            }
        </style>
        <style>
            *{
                margin: 0; 
                padding: 0; 
                box-sizing: border-box;
            }
            html, body{
                width: 100%;
                height: 100%;
                overflow-y: auto;
            }
            input, button {
                outline: none;
            }
            .container{
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;
            }
            .Upload{
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                flex-direction: column;
                justify-content: center;
                width: 45%;
                height: 450px;
                border-radius: 8px;
                box-shadow: 0px 0px 10px -5px;
            }
            .Upload > input[type="text"]{
                display: block;
                margin-bottom: 10px;
                padding: 2px 5px;
                width: 350px;
                color: #333;
                line-height: 32px;
                border: 1px solid #ccc;
            }
            .Upload #file-upload-button {
                margin-top: 10px;
                padding: 0 12px;
                color: #fff;
                font-size: 14px;
                line-height: 28px;
                border: 1px solid #3bb6b6;
                background-color: #3bb6b6;
            }
            .Upload > input[type="button"]{
                margin-top: 10px;
                padding: 0 12px;
                color: #fff;
                font-size: 14px;
                line-height: 28px;
                border: 1px solid #3bb6b6;
                background-color: #3bb6b6;
                transition: all .2s;
                cursor: pointer;
            }
            .Upload > input[type="button"]:hover{
                border: 1px solid #4dd6d6;
                background-color: #4dd6d6;
            }
            .loading {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: #2c3e50;
                z-index: 999;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="Upload">
                <input id="token" name="files" type="text" placeholder="请输入生成的token">
                <input id="files" name="files" type="file" />
    
                <!-- <input type="button" value="提交XML" onclick="UploadXML()" /> -->
                <input type="button" value="提交JQ" onclick="Uploadjq()" />
    
                <div class="file-list"></div>
            </div>
        </div>
        <!-- loading -->
        <div class="loading">
            <div class="sk-chase">
                <div class="sk-chase-dot"></div>
                <div class="sk-chase-dot"></div>
                <div class="sk-chase-dot"></div>
                <div class="sk-chase-dot"></div>
                <div class="sk-chase-dot"></div>
                <div class="sk-chase-dot"></div>
            </div>
        </div>
        <!-- loading /-->
    </body>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

    <script>
        function Uploadjq() {
            $('.loading').show();
            var files = new FormData();
            files.append('token', $('#token').val());
            files.append('files', document.getElementById('files').files[0]);

            $.ajax({
                url: '/api/put',
                type: 'POST',
                data: files,
                processData: false,  // tell jQuery not to process the data
                contentType: false,  // tell jQuery not to set contentType
                dataType: 'JSON',
                success: function (arg) {
                    if (arg.status){
                        // ...
            
                        $('.loading').hide();
                    }
                }
            })
            
        }
    </script>
</html>
